<template>
  <div class="main">
    <mine-title>角色管理</mine-title>
    <div class="content">
      <div class="block-header">
        <div class="block-header-left">
          <mine-button type="primary" @click="addRole()"
            ><i class="iconfont icon-add-line"></i>新建角色
            <!-- v-if="hasAuth('system:user:add')" -->
          </mine-button>
          <mine-button
            @click="deleteRole"
            secondary
            :disabled="!multipleSelection.length"
            ><i class="iconfont icon-delete-line"></i>删除
            <!-- v-if="hasAuth('system:user:delete')" -->
          </mine-button>
          <mine-button type="primary" secondary @click="loadData()"
            ><i class="iconfont icon-reset-line"></i>刷新
          </mine-button>
        </div>
        <div class="block-header-right"></div>
      </div>
      <el-table
        class="table"
        :data="tableData"
        style="width: 100%"
        v-loading="loading"
        @selection-change="handleSelectionChange"
        ref="multipleTable"
      >
        <el-table-column type="selection" width="45"></el-table-column>
        <el-table-column label="序号" show-overflow-tooltip width="60">
          <template slot-scope="scope">
            <span>{{ scope.$index + (currentPage - 1) * pageSize + 1 }} </span>
          </template>
        </el-table-column>
        <el-table-column label="角色名" prop="name" show-overflow-tooltip>
          <template slot="header">
            <span>角色名</span>
            <mine-table-search
              @searchSubmit="searchSubmit"
              name="name"
            ></mine-table-search>
          </template>
        </el-table-column>
        <el-table-column label="权限字符" prop="code" show-overflow-tooltip>
          <template slot="header">
            <span>权限字符</span>
          </template>
        </el-table-column>
        <el-table-column
          label="创建时间"
          prop="createTime"
          show-overflow-tooltip
        >
          <template slot="header">
            <span>创建时间</span>
          </template>
        </el-table-column>
        <el-table-column label="备注" prop="remark" show-overflow-tooltip>
          <template slot="header">
            <span>备注</span>
            <!--                  <mine-table-search @searchSubmit="searchSubmit" name="modelCount"></mine-table-search>-->
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <mine-button type="text" @click="check(scope.row)"
              >详情
              <!-- v-if="hasAuth('system:user:edit')" -->
            </mine-button>
            <mine-button type="text" @click="handleRoleDialogValue(scope.row)"
              >分配权限
              <!-- v-if="hasAuth('system:user:role')" -->
            </mine-button>
          </template>
        </el-table-column>
      </el-table>
      <mine-pagination
        @numberChange="numberChange"
        :total="total"
        :page-size="listQuery.pageSize"
        :current-page="listQuery.pageNum"
      >
      </mine-pagination>

      <mine-dialog
        :top="'10vh'"
        :appendToBody="true"
        :dialogFormVisible="menuDialogVisible"
        :width="'900px'"
        :title="title"
        :showClose="true"
        @close="closeDialog"
      >
        <MenuDialog
          slot="option"
          v-if="menuDialogVisible"
          :menuDialogVisible="menuDialogVisible"
          :id="id"
          @initRoleList="loadData"
          @closeDialog="closeDialog"
        ></MenuDialog>
      </mine-dialog>
    </div>
  </div>
</template>
<script>
import requestUtil from "../../utils/authUtil";
import MenuDialog from "./components/menuDialog";
import { detailMixins, modalMixins } from "./mixins.js";

export default {
  components: {
    MenuDialog,
  },
  mixins: [detailMixins, modalMixins],
  data() {
    return {
      sysRoleList: [],
      id: -1,
      listQuery: {
        query: "",
        pageNum: 1,
        pageSize: 10,
      },
      // table参数
      tableData: [],
      total: 0,
      pageSize: 10,
      currentPage: 1,
      multipleSelection: [],
      loading: false,
      tableHeight: window.innerHeight - 330,
      menuDialogVisible: false, // 分配权限弹框
    };
  },
  methods: {
    closeDialog() {
      this.menuDialogVisible = false;
    },
    searchSubmit(value) {
      if (value.key === "username") {
        this.listQuery.query = value.value;
      }
      this.loadData(true);
    },
    async loadData(flag) {
      if (flag) {
        this.listQuery.pageNum = 1;
        this.listQuery.pageSize = 10;
        this.currentPage = 1;
      }
      const params = this.listQuery;
      this.loading = true;
      try {
        const res = await this.$store.dispatch(
          "roleAdmin/getRoleTableList",
          params
        );
        // // TODO： 定制后台数据处理
        if (res.data.code === 200) {
          this.tableData = res.data.roleList;
          this.total = res.data.total;
        } else {
          this.tableData = [];
          this.total = 0;
          this.$message.warning("列表获取失败");
        }
      } catch (e) {
        console.error(e);
      }
      this.loading = false;
    },
    addRole() {
      this.$router.push({
        path: "/addRole",
      });
    },
    async deleteRole() {
      this.$mineConfirm("确认要删除？", "删除提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const ids = this.multipleSelection.map((item) => item.id);
          this.loading = true;
          try {
            const res = await this.$store.dispatch(
              "roleAdmin/deleteRoleTableList",
              ids
            );
            if (res.data.code == 200) {
              this.$message.success("删除成功!");
              this.loadData(true);
            } else {
              this.$message.error(res.data.msg || "删除失败");
            }
          } catch (e) {
            console.error(e);
          }
          this.loading = false;
        })
        .catch(() => {});
    },
    // 查看详情
    check(val) {
      this.$router.push({
        path: "/roleDetail",
        query: {
          id: val.id,
        },
      });
    },
    hasAuth(perm) {
      let perms = this.$store.getters.GET_PERMS;
      // console.log(perms)
      return perms.indexOf(perm) >= 0;
    },
    handleSelectionChange(selection) {
      this.multipleSelection = selection;
    },
    numberChange(val) {
      switch (val.flag) {
        case "pageSize":
          this.pageSize = val.pageSize;
          this.listQuery.pageNum = 1;
          this.listQuery.pageSize = val.pageSize;
          this.loadData(true);
          break;
        case "currentPage":
          this.currentPage = val.currentPage;
          this.listQuery.pageNum = val.currentPage;
          this.loadData(false);
          break;
        default:
          break;
      }
    },
    handleRoleDialogValue(row) {
      this.title = "分配权限";
      this.flag = true;
      this.id = row.id;
      this.menuDialogVisible = true;
    },
  },
  mounted() {
    this.loadData();
  },
};
</script>

<style lang="scss" scoped>
.table {
  margin-top: 15px;
}

.el-tag--small {
  margin-left: 5px;
}
</style>
